<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-form label-width="160px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-card class="initCard">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="送样日期" prop="deliverDate">
                            <el-date-picker v-model="form.deliverDate" type="date" placeholder="请选择日期"
                                value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
                        <el-form-item prop="sampleAuditId">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">样品评审表</span>
                            </template>
                            <sc-table-select v-model="samples" :fileName="fileName" :apiObj="apiObj" :table-width="700"
                                :props="sampleAuditProps" @change="sampleAuditChange" />
                            <el-button @click="toDetail">评审表详情</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <el-form-item label="材质" prop="materialQuality">
                            <el-input v-model="sampleAudit.materialQuality" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="样品图号">
                            <el-input v-model="sampleAudit.drawingNo" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="样品数量">
                            <el-input v-model="sampleAudit.amount" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="炭刷规格">
                            <el-input v-model="sampleAudit.carbonBrushSpec" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户名称" prop="custName">
                            <el-input v-model="form.custName" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="diliverById">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">送样人</span>
                            </template>
                            <ts-select v-model="form.diliverById" :fileName="diliverFileName" :template="diliverProps"
                                :label="form.diliverByName" @updateRow="diliverChange" :key="diliverByKey"></ts-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="送样部门">
                            <el-input v-model="sampleAudit.deptName" disabled class="borderNone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="completedStatus">
                            <template #label>
                                <span style="color: #f56c6c;margin-right: 4px;">*</span>
                                <span style="display:inline-block;">评审表完成状态</span>
                            </template>
                            <el-select v-model="form.completedStatus" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.completedStatusList" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="过滤已送样过的销货单">
                            <el-checkbox v-model="form.injectionConditionKey" true-label="excludeSendSample" false-label=""
                                @change="check"></el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 10px;">
                <template #header>
                    <div class="card-header">
                        <span>样品清单</span>
                        <!-- <el-switch style="margin-left: 20px;" v-model="dataSourceFileName" active-text="选择销货单"
                            inactive-text="选择样品" active-value="ErpOrderDtlReport" inactive-value="ErpProductReport"
                            @change="switchChange" /> -->
                            <el-button  style="margin-left: 10px;" @click="selectOrder" type="success" :icon="Plus" size="small">选择销货单</el-button>
                            <el-button @click="selectProduct" type="primary" :icon="Plus" size="small">选择样品</el-button>
                    </div>
                </template>
                <ts-form-table-select v-model="dataList" hideAdd :mapping="dataSource[dataSourceFileName].mapping"
                    :fileName="dataSource[dataSourceFileName].fileName" placeholder="暂无数据"
                    :defineProps="dataSource[dataSourceFileName].props" :fieldMap=dataSource[dataSourceFileName].fieldMap
                    @deleteRow="deleteRow" edit>
                    <template #tableContent>
                        <el-table-column  label="销货单号" width="200">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.omOrderNumber}}</span>
                                <el-input v-else v-model="scope.row.omOrderNumber"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column  label="客户订单号" width="200">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.custOrderNumber}}</span>
                                <el-input v-else v-model="scope.row.custOrderNumber"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column  label="销货日期" width="200">
                            <template #default="scope">
                            <span v-if="scope.row.operationType == ''">{{ scope.row.omOrderDate}}</span>
                                <el-date-picker v-else v-model="scope.row.omOrderDate" type="date" placeholder="请选择日期"
                                    value-format="YYYY-MM-DD" />
                            </template>
                        </el-table-column>
                        <el-table-column  label="样品编号" width="200">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.mtlNo}}</span>
                                <el-input v-else v-model="scope.row.mtlNo"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column  label="样品名称" width="150">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.mtlName}}</span>
                                <el-input v-else v-model="scope.row.mtlName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column  label="样品规格" width="200">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.mtlSpec}}</span>
                                <el-input v-else v-model="scope.row.mtlSpec"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column  label="样品单位" width="100">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.mtlUnitName}}</span>
                                <el-select v-else v-model="scope.row.mtlUnitId" clearable placeholder="请选择：">
                                    <el-option v-for="item in configData.mtlUnitList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column  label="数量" width="100">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.qty}}</span>
                                <el-input v-else v-model="scope.row.qty" type="number" :min="0"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column  label="摘要" width="300">
                            <template #default="scope">
                                <span v-if="scope.row.operationType == ''">{{ scope.row.remark}}</span>
                                <el-input v-else v-model="scope.row.remark"></el-input>
                            </template>
                        </el-table-column>
                    </template>
                </ts-form-table-select>
            </el-card>
            <el-card style="margin-top: 5px; margin-bottom: 10px;">
                <el-form-item label="备注">
                    <el-input style="width: 700px;" v-model="form.remark" :autosize="{ minRows: 2 }" type="textarea"
                        placeholder="请输入" />
                </el-form-item>
            </el-card>
        </el-form>
        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="updateSendSample(formRef)">确 定</el-button>
        </div>
        <div class="sampleDialog"></div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch, computed, getCurrentInstance, createVNode, render } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/sample'
import tsSelect from '@/components/scSelect/index.vue'
import tsFormTableSelect from '@/components/tsFormTableSelect/index.vue'
import sysApi from '@/api/model/system'
import tsLayer from '@/utils/useDialog'
const instance = getCurrentInstance()
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const apiObj = ref(sysApi.select.query)
const form = ref({
})
const sampleAudit = ref({})
const diliverByKey = ref(0)
const configData = ref([])
const dataList = ref([])
const deleteList = ref([])
const formRef = ref()
const addTemplate = ref({
})
const samples = ref({})
const fileName = ref('WaitingSendSampleReport')
const diliverFileName = ref('ChooseEmployeeReport')
const dataSourceFileName = ref('ErpProductReport')
const sampleAuditProps = {
    value: 'id',
    label: 'number'
}
//用于两个对话框选择配置参数的切换
const dataSource = ref({
    'ErpProductReport': {
        fileName: 'ErpProductReport',
        mapping: [
            { value: 'number', label: 'mtlNo' },
            { label: 'mtlName', value: 'name' },
            { label: 'mtlSpec', value: 'spc' },
            { label: 'mtlUnitId', value: 'mtlUnitName' },
        ],
        props: {
            value: 'mtlNo'
        },
        fieldMap: {

        }
    },
    'ErpOrderDtlReport': {
        fileName: 'ErpOrderDtlReport',
        mapping: [
            { label: 'omOrderNumber', value: 'number' },
            { label: 'custOrderNumber', value: 'custOrderNo' },
            { label: 'qty', value: 'mtlQty' },
            { label: 'mtlUnitId', value: 'mtlUnitName' },
            { label: 'omOrderDtlIndex', value: 'id' },
            { label: 'omOrderDate', value: 'orderDate' },
        ],
        props: {
            value: 'omOrderDtlIndex'
        },
        fieldMap: {
            custOrderNo: '',
            injectionConditionKey: ''
        }
    }
})
const diliverProps = {
    value: 'id',
    label: 'name'
}
const formRules = reactive({
    deliverDate: [
        { required: true, message: "请输入送样日期", trigger: "change" }
    ]
})
onMounted(() => {
    getInit()
})
const getInit = async () => {
    let res = await Api.sendSample.detail.post(props.paramsData)
    console.log(res)
    if (res.code == '200') {
        configData.value = res.configData
        form.value = res.data
        addTemplate.value = res.dtl
        dataList.value = res.dataList
        samples.value = {
            'id': form.value.sampleAuditId,
            'number': form.value.sampleAuditNumber
        }
        sampleAudit.value = res.data.sampleAudit!==null?res.data.sampleAudit:{}
        dataSource.value.ErpOrderDtlReport.fieldMap.custOrderNo = form.value.sampleAuditNumber
    }
}
//选择样品评审表后带出的参数
const sampleAuditChange = (val) => {
    dataSource.value.ErpOrderDtlReport.fieldMap.custOrderNo = val.number
    sampleAudit.value = val
    form.value.sampleAuditNumber = val.number
    form.value.sampleAuditId = val.id
    form.value.custId = val.custId
    form.value.custName = val.custName
    form.value.custNo = val.custNo
    form.value.diliverById = val.salesId
    form.value.diliverByName = val.salesName
    form.value.deliverDeptId = val.deptId
    diliverByKey.value++
}
//两个对话框选择
const selectOrder = () => {
    dataSourceFileName.value = 'ErpOrderDtlReport'
    dataSourceSelect.value.openDialog()
}
const selectProduct = () => {
    dataSourceFileName.value = 'ErpProductReport'
    dataSourceSelect.value.openDialog()
}
//选择送样人带出参数
const diliverChange = (val) => {
    console.log(val)
    form.value.diliverById = val.id
    form.value.diliverByName = val.name
    sampleAudit.value.deptName = val.deptName
    form.value.deliverDeptId = val.deptId
}
const check = (val) => {
    dataSource.value.ErpOrderDtlReport.fieldMap.injectionConditionKey = val
}
//打开样品评审表详情对话框
const toDetail = () => {
    const box = document.querySelector(".sampleDialog")
    if (form.value.sampleAuditId) {
        let paramsData = {
            id: form.value.sampleAuditId
        }
        import(`@/views/sample/audittable/detailSampleAudit.vue`).then((res) => {
            const form = createVNode(res.default, {
                paramsData,
                onUpdatetable(val) {
                    render(null, box)
                }
            })
            tsLayer.open({
                title: '查看样品评审表',
                width: '70%',
                fullScreen: false,
                appContext: instance.appContext,
                box: box,
                content: form
            })
        })
    }
    else {
        ElNotification.info({ title: '', message: '请选择样品评审表！', duration: 2000 });
    }
}
const deleteRow = (row)=>{
    row.operationType = 'delete'
    deleteList.value.push(row)
}
const updateVisible = (val) => {
    emit('updatetable')
}
const updateSendSample = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            updateSendSampleData();
        }
    })
}

const updateSendSampleData = async () => {
    var params = {
        bean: form.value,
        dataList: dataList.value.concat(deleteList.value),
    }
    var res = await Api.sendSample.update.post(params);
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '添加成功！', duration: 2000 });
        emit('updatetable', true);
    }
}


</script>
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }

    :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;
    }
}
</style>



